<template id="indexdata">
<div class="srcoll-documentation" >
	<div class="documentation paper" >
    <ul>
            <li v-for="entry in filteredData" :key="entry.id">
                <router-link :to="{ name: 'Content', params: { id: entry.id,title:entry.title}}">
                    <div class="paper-a" ><a>{{entry.title}}</a></div>
                    <div class="userhelp-new">
                        {{entry.content}}
                    </div>
                </router-link>
            </li>
            <!-- <li v-for="data in datas" :key="data.id">
                <router-link :to="{ name: 'Content', params: { id: data.id,title:data.title}}">
                    <div class="paper-a" ><a>{{data.title}}</a></div>
                    <div class="userhelp-new">
                    {{data.content}}
                    </div>
                </router-link>  
            </li> -->
	</ul>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        data:Array,
        filterkey:String
    },
    computed : {
        filteredData(){
                var filterKey = this.filterKey && this.filterKey.toLowerCase()
                var data = this.data
                if (filterKey) {
                data = data.filter(function (row) {
                return Object.keys(row).some(function (key) {
                    return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                })
                })
            }
            return data
        }
        
    }

}
</script>
<style scoped>
@import url('../../../assets/css/content.css');
@import url('../../../assets/css/animation.css');
</style>
